<template>
  <div>
    <template v-if="multipleType">
      <div class="one-line">
        <p v-if="text">
          <span class="is-required" v-if="required">*</span>{{ text }}
        </p>
        <el-select
          :size="size"
          v-model="value"
          :placeholder="placeholder"
          multiple
          :filterable="filterable"
          :clearable="clearabled"
          style="width: 220px"
          :value="value"
          @clear="clearSelect"
          @change="selectChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </template>
    <template v-else>
      <div class="one-line">
        <p v-if="text" class="text">
          <span class="is-required" v-if="required">*</span>{{ text }}
        </p>
        <el-select
          v-model="value"
          ref="mysel"
          :size="size"
          :placeholder="placeholder"
          :filterable="filterable"
          :clearable="clearabled"
          :style="{ width: `${width}px` }"
          :disabled="disabled"
          @clear="clearSelect"
          @change="selectChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "DepSelect",
  props: {
    placeholder: {
      type: String,
      default: "选择状态筛选",
    },
    options: {
      type: Array,
      default: [],
    },
    clearabled: {
      type: Boolean,
      default: true,
    },
    multipleType: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 200,
    },
    text: {
      type: String,
      default: "",
    },
    defaultVal: {
      type: String,
      default: "",
    },
    filterable: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "",
    },
    required: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    selectChange() {
      this.$emit("selectChange", this.value);
    },
    clearSelect() {
      this.$emit("clearSelect");
    },
  },
  created() {
    this.value = this.defaultVal;
  },
  watch: {
    defaultVal() {
      this.value = this.defaultVal;
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.one-line {
  display: flex;
  align-items: center;
  .text {
    padding: 0 10px;
  }
  .is-required {
    color: red;
    position: relative;
  }
}
</style>
